import { List, message, Avatar, Spin, Card } from 'antd';
import reqwest from 'reqwest';
import { connect } from 'dva';

import InfiniteScroll from 'react-infinite-scroller';
import React from 'react';
import styles from './ChooseStock.less';

const fakeDataUrl = 'https://randomuser.me/api/?results=5&inc=name,gender,email,nat&noinfo';

@connect(({ chooseStockRule, loading }) => ({
  chooseStockRule,
  loading: loading.models.chooseStockRule,
}))
class InfiniteListExample extends React.Component {
  state = {
    data: [],
    loading: false,
    hasMore: true,
    listParam: {
      num: '',
      page: '',
    },
  };

  componentDidMount() {
    const { listParam } = this.state;
    listParam.page = 0;
    this.fetchData(res => {
      this.setState({
        data: res.data,
      });
    });

    // const {dispatch} = this.props;
    // const {listParam} = this.state;
    // listParam.num = 20;
    // listParam.page = 1;
    // dispatch({
    //   type: 'chooseStockRule/GetMinervinipa',
    //   payload: listParam,
    // });
  }

  fetchData = callback => {
    // reqwest({
    //   url: fakeDataUrl,
    //   type: 'json',
    //   method: 'get',
    //   contentType: 'application/json',
    //   success: (res) => {
    //     callback(res);
    //   },
    // });
    const { dispatch } = this.props;
    const { listParam } = this.state;
    listParam.num = 20;
    listParam.page += 1;
    // alert(listParam.page);
    dispatch({
      type: 'chooseStockRule/GetMinervinipa',
      payload: listParam,
      callback: response => {
        callback(response);
      },
    });
  };

  handleInfiniteOnLoad = () => {
    let { data } = this.state;
    this.setState({
      loading: true,
    });
    if (data.length > 99999) {
      message.warning('Infinite List loaded all');
      this.setState({
        hasMore: false,
        loading: false,
      });
      return;
    }
    this.fetchData(res => {
      data = data.concat(res.data);
      this.setState({
        data,
        loading: false,
      });
    });
  };

  render() {
    return (
      <div className={styles['demo-infinite-container']}>
        <InfiniteScroll
          initialLoad={false}
          pageStart={0}
          loadMore={this.handleInfiniteOnLoad}
          hasMore={!this.state.loading && this.state.hasMore}
          useWindow={false}
        >
          <List
            dataSource={this.state.data}
            renderItem={item => (
              <List.Item key={item.id}>
                <List.Item.Meta
                  // avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
                  // title={<a href="https://ant.design">{item.name.last}</a>}
                  title={this.setTitle(item)}
                  // description={<div>{this.renderGaugeColor(item.content)}</div>}
                  description={this.setDescription(item)}
                />
              </List.Item>
            )}
          >
            {this.state.loading && this.state.hasMore && (
              <div className={styles['demo-loading-container']}>
                <Spin />
              </div>
            )}
          </List>
        </InfiniteScroll>
      </div>
    );
  }

  setTitle(param) {
    if (param.flag) {
      return (
        <div>
          <h1 style={{ fontSize: 16, color: 'red' }}> {param.title} </h1>
          <h4 style={{ fontSize: 13, color: 'red' }}> {param.publishtime} </h4>
        </div>
      );
    }
    return (
      <div>
        <h1 style={{ fontSize: 16, color: 'black' }}> {param.title} </h1>
        <h4 style={{ fontSize: 13, color: 'black' }}> {param.publishtime} </h4>
      </div>
    );
  }

  // 绘制仪表盘颜色
  setDescription(param) {
    if (param.flag) {
      return <div style={{ color: 'red' }} dangerouslySetInnerHTML={{ __html: param.content }} />;
    }
    return <div style={{ color: '#777777' }} dangerouslySetInnerHTML={{ __html: param.content }} />;

    return (
      <div>
        <div>
          <div>
            <span>
              After two small declines the <strong>bull </strong>count jumped back to{' '}
              <strong>54.3%, </strong>from 52.9% a week ago. That is just below the four-week
              reading of 54.4%. Both are highs since early in 2015 when the bulls peaked at 59.5% in
              February and at 57.4% late that April. Major averages formed tops then, including new
              records that held until recent weeks. The bulls remain just below the 55% danger
              level. If the NASDAQ Comp clearly joins other index highs we should get more
              capitulation and advisor shifts to approach or equal those 2015 peak levels. That may
              signal the next market top. The bulls are up nearly 30% from their Jan/Feb 2016
              sell-off low reading of 24.7%, which was clearly a good time to buy. <br /> <br /> The
              latest market advance pushed the <strong>bears </strong>down to{' '}
              <strong>20.9%,</strong> from 21.2% last issue. That fourth straight drop moved the
              reading closer to the multiyear low 20.6% bear reading shown late April this year.
              Stocks were also surging then, up 15%+ from their Feb-16 lows. Recent index gains
              forced more bears to commit funds but others still project the highs as 'bull traps'.
              Some note stalling action. In general the bears note weak world economies and expect
              US stocks to ultimately suffer as a result. This year the bears peaked at 39.8% at the
              mid-Feb sell-off lows. That was the most bears since fall 2011 and a solid contrarian
              signal to buy. <br /> <br /> There was a small drop for the advisors projecting a{' '}
              <strong>correction. </strong>At <strong>24.8%, </strong>it was down from 25.9% last
              time and near back to the two-weeks ago reading. Recent counts are still well below
              the late June reading of 34.6%. Early May when the DJI touched 17.500 many more
              (40.6%) thought a correction was due. Neither expectation was fulfilled (nor was the
              count early Feb (36.1%). Higher projections for a market retreat signal lowered risk
              to contrarians so the decline in those expecting a setback is another worry. <br />{' '}
              <br /> The{' '}
              <strong>
                <em>bull-bear</em>
              </strong>{' '}
              <strong>spread </strong>expanded to <strong>+33.4% </strong>after last week's small
              contraction to 31.7%. Again caution is signaled from the widest positive{' '}
              <strong id="yui_3_16_0_ym19_1_1470838946995_13234">
                <em id="yui_3_16_0_ym19_1_1470838946995_13233">difference </em>
              </strong>
              since early 2015. <strong>Spreads </strong>above +30% show higher risk for the fourth
              week! (Those above 40% signal danger.) In contrast, late May-16 had a +11.4%
              difference. Spreads near +10% allow accumulation in a rising market. A stronger signal
              occurred early Feb-16 when the negative <strong>difference</strong> of -14.5% clued us
              to a very favorable time to buy. More index records may result in even wider{' '}
              <strong>spreads</strong> that suggest major market tops. The large{' '}
              <strong id="yui_3_16_0_ym19_1_1470838946995_13232">differences</strong>shown on early
              2015 market peaks (+43.5% in April and +45.5% in Feb) were the last examples of that.
            </span>
            <span />
          </div>
        </div>
        <hr />
      </div>
    );
  }
}
export default InfiniteListExample;
